<template>
    <h2 style="color: white;height: 30px; margin: 15px 0px;">后台管理系统</h2>
    <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="collapsed" @open="handleOpen"
        @close="handleClose">
        <RouterLink to="/home/dept" class="myLink">
            <el-menu-item index="1">
                <el-icon><icon-menu /></el-icon>
                <template #title>部门管理</template>
            </el-menu-item>
        </RouterLink>
        <RouterLink to="/home/emp" class="myLink">
            <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <template #title>员工管理</template>
            </el-menu-item>
        </RouterLink>
        <RouterLink to="/home/other" class="myLink">
            <el-menu-item index="3">
                <el-icon>
                    <document />
                </el-icon>
                <template #title>其他</template>
            </el-menu-item>
        </RouterLink>
        <RouterLink to="/home/system" class="myLink">
            <el-menu-item index="4">
                <el-icon>
                    <setting />
                </el-icon>
                <template #title>系统设置</template>
            </el-menu-item>
        </RouterLink>
    </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

defineProps({
    collapsed: {
        type: Boolean,
    }
})

const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-menu {
    background-color: rgba(255, 255, 255, 0);
    /* color: white; */
    border: none;
}

.myLink {
    text-decoration: none !important;

}

</style>